<template>
  <div class="upload-body">
    <el-dialog v-model="centerDialogVisible" :title="'回复 @' + postsDetail.user.user_name" width="40%" left>
      <reboundMsgInput :isPop="true" :params="params" @confirm="confirm"></reboundMsgInput>
    </el-dialog>
  </div>
</template>
<script>
// 消息回复弹框
import { toFixedNum } from "@/utils/common.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import reboundMsgInput from "./reboundMsgInput.vue";

import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
} from "vue";
export default defineComponent({
  components: {
    reboundMsgInput,
  },
  props: {
    postsDetail: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let data = reactive({
      centerDialogVisible: false,
      comment_content: "", //消息内容
      imgFile: "", //聊天图片
      showEmoji: false,
    });

    // 当前回复信息
    let params = computed(() => {
      return {
        comment_id: props.postsDetail.comment_id || props.postsDetail.id, //评论id
        posts_id: props.postsDetail.posts_id, //帖子id
        reply_user_id: props.postsDetail.user.id, //用户id
      };
    });

    // 表情包
    let emojiList = computed(() => {
      let emojiConfig = store.state.whichConfigData;
      let emoji = emojiConfig.emoji;
      let list = Object.values(emoji).flatMap((page) => page);
      return list;
    });

    // 表情包点击
    let emojiClick = (item) => {
      data.comment_content += item.alt;
    };

    // 图片上传成功
    let uploadsucess = (obj) => {
      data.imgFile.url = obj.url;
    };

    // 图片上传开始前
    let fileQueued = (file) => {
      let obj = {
        name: file.name,
        url: "",
      };
      data.imgFile = obj;
    };

    // 移除图片
    let removeImg = () => {
      data.imgFile = "";
    };

    // 打开弹框
    let open = () => {
      data.centerDialogVisible = true;
    };

    // 取消
    let close = () => {
      data.centerDialogVisible = false;
    };

    // 确定
    let confirm = () => {
      emit("sendConfirm");
      close();
    };

    return {
      params,
      emojiClick,
      emojiList,
      removeImg,
      uploadsucess,
      fileQueued,
      close,
      confirm,
      open,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.upload-body {
  :deep(.el-dialog) {
    border-radius: 20px;
    // min-width: 520px;
    // max-width: 600px;
    width: 600px;
  }

  :deep(.el-dialog__footer) {
    text-align: right !important;
  }

  :deep(.el-dialog__body) {
    padding-top: 10px;
    // padding-bottom: 0px;
  }
}
</style>
